import React from 'react';
import './index.css';
import mzsdk from '../../../../utils/mzsdk'
import { Toast } from 'antd-mobile';

/**
 * 循环播放的商品组件
 */

var timer = null
var goodIndex = -1

export default class RecommendGood extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            goods: ['1','2'],
            isShow: true,

            currentGood: null,

            isNeedAnimation: true,
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('goodDetail-update-list')
        mzsdk.mzee.off('recommendGoods_isToPlay');
    }

    componentDidMount() {
        var _this = this;
        mzsdk.mzee.on("goodDetail-update-list", function (e) {
            console.log('刷新商品数据源：',e.goods.list);
            _this.updateGoods(e.goods.list);
            //置空数据源就隐藏了
            // _this.updateGoods([]);
        })
        mzsdk.mzee.on("recommendGoods_isToPlay", function (e) {
            if (timer) {
                _this.setState({
                    isNeedAnimation: false
                })
                clearInterval(timer)
            }
            if (e == true) {
                setTimeout(() => {
                    goodIndex--;
                    _this.startInterval();
                }, 500);
            }
        })
    }

    updateGoods = (goods) => {
        var _this = this;
        this.setState({
            goods: goods
        }, () => {
            mzsdk.mzee.emit('chat_updateFrame')
            _this.startInterval();
        })
    }

    clickGoodInfo = () => {
        let info = '点击的商品ID：' + this.state.currentGood.id
        Toast.info(info, 1.5)
        console.log('当前点击的商品：',this.state.currentGood)
    }

    startInterval = () => {
        if (timer) {
            this.setState({
                isNeedAnimation: false
            })
            clearInterval(timer)
        }
        let { goods } = this.state;
        if (goods.length <= 0) {
            return;
        }
        this.fixShowGoodInfo();
        var _this = this;
        this.setState({
            isNeedAnimation: true
        })
        timer = setInterval(() => {
            _this.setState({
                isShow: !_this.state.isShow
            }, () => {
                if (_this.state.isShow == false) {
                    setTimeout(() => {
                        _this.fixShowGoodInfo();
                    }, 500);
                }
            })
        }, 4000);
    }

    fixShowGoodInfo = () => {
        let { goods } = this.state;
        goodIndex++;
        if (goodIndex < 0 || goodIndex >= goods.length) {
            goodIndex = 0;
        }
        let good = goods[goodIndex];
        this.setState({
            currentGood: good
        })
    }

    render() {
        let { goods, isShow, currentGood, isNeedAnimation } = this.state;
        let animation_show = 'show-item 500ms ease-in forwards'
        let animation_hide = 'hide-item 500ms ease-out forwards'
        let _show = 'show-item 0ms ease-in forwards'
        let _hide = 'hide-item 0ms ease-out forwards'

        return (
            <div className="mobile-main-goods-recommend" id="mobile-main-goods-recommend" style={{display: goods.length > 0 ? 'block' : 'none'}}>
                <div className='recommend-good' onClick={this.clickGoodInfo} style={{animation: isShow ? (isNeedAnimation ? animation_show : _show) : (isNeedAnimation ? animation_hide : _hide), opacity: isShow ? '1' : '0'}}>
                    <img className="recommend-good-icon" src={currentGood ? currentGood.pic : ''}></img>
                    <div className="recommend-good-info">
                        <div className="recommend-good-name">{currentGood ? currentGood.name : '商品'}</div>
                        <div className="recommend-good-price">¥{currentGood ? currentGood.price : '999999'}</div>
                    </div>
                </div>
            </div>
        )
    }
}
